Touch Events

When users touch the screen of a website, touch events are fired. Let me show you what information you receive with touch events.

Use the event object to tailor actions to events. Each touch event includes three lists of touches.

touches: a list of all fingers currently on the screen.
targetTouches: a list of fingers on the current DOM element.
changedTouches: a list of fingers involved in the current event. For example, in a touchend event, this will be the finger that was removed.

These lists consist of objects that contain touch information:

identifier: a number that uniquely identifies the current finger in the touch session.
target: the DOM element that was the target of the action.
client/page/screen coordinates: where on the screen the action happened.
radius coordinates and rotationAngle: describe the ellipse that approximates finger shape.

In the next quiz, you'll be challenged to create an element that responds to touches naturally!